<template>
  <div>{{ msg }}</div>
</template>
<script>
export default {
  data() {
    return {
      msg: 1,
      myInterval: undefined,
    };
  },
  methods: {},
  beforeCreate() {
    console.log("beforeCreate，初始化前，不能访问数据", this.msg);
  },
  created() {
    console.log("create，Vue实例创建完成，开始渲染", this.msg);
  },
  beforeMount() {
    console.log("beforeMount，虚拟DOM准备完毕，开始渲染", this.msg);
  },
  mounted() {
    console.log("mounted，挂载完成，可以看到界面样式", this.msg);
    this.myInterval = setInterval(() => {
      this.msg = this.msg + 1;
    }, 1000);
  },
  beforeUpdate() {
    console.log(
      "beforeUpdate，界面更新之前，数据新，界面旧，在此钩子更新数据不会造成重复渲染",
      this.msg
    );
    this.msg += 1;
  },
  updated() {
    console.log("updated，界面更新之后，数据新，界面新", this.msg);
  },
  beforeDestroy() {
    console.log(
      "beforeDestroy，Vue实例销毁前（该组件销毁前），可以获取数据",
      this.msg
    );
    clearInterval(this.myInterval);
  },
  destroyed() {
    console.log(
      "destroyed，销毁后，数据绑定与监听被移除，子实例都会被销毁",
      this.msg
    );
  },
};
</script>